<template>
  <div class="ip-input-container">
      <div class="input__container">
        <div class="input__container__item" v-for="(item, index) in ipAddress" :key="index">
          <el-input type="text"
                    ref="input"
                    pattern="[0-9]"
                    v-model="item.value"
                    :disabled="disabled"
                    :placeholder="placeholder"
                    @input.native="checkIpValue(item, index)"
                    @keyup.native="turnPosFunc(item, index, $event)"
                    @blur.native="inputBlurFunc(item)"
          >
          </el-input>
        </div>
      </div>
<!--      <div class="input__container">-->
<!--        <div class="input__container__item" >-->
<!--          <el-input ref="placeholderRef" v-model="value" placeholder="请输入IPV4地址"  @keyup="placeholderInput($event)"></el-input>-->
<!--        </div>-->
<!--      </div>-->
  </div>
</template>

<script>
const IP_RULES = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
export default {
  name: "index",
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请输入"
    }
  },
  data () {
    return {
      clipResult: [],
      ipAddress: [
        { value: '' },
        { value: '' },
        { value: '' },
        { value: '' }
      ]
    }
  },
  watch: {
    value:{
      immediate: true,
      handler(cur) {
        this.setIpAddress(cur)
      }
    }
  },
  mounted() {

    console.log("value 传递进来的ip值 value", this.value)

    window.addEventListener("paste", e => {
      const clipboardData = e.clipboardData || window.clipboardData
      let result = clipboardData.getData("text/plain")
      if (IP_RULES.test(result)) this.setIpAddress(result)
    })
  },
  beforeDestroy() {
    window.removeEventListener('paste', () => {})
  },
  methods: {
    // placeholderInput(event) {
    //   console.log('event', event)
    // },
    // 输入值
    checkIpValue(item) {
      /**
       * 1. 去除空格
       * 2. 保证输入的数值是 0-255之间的正整数
       */
      // eslint-disable-next-line no-unused-vars
      let val = item.value
      val = val.trim()
      val = parseInt(val, 10)
      if (Number.isNaN(val)) {
        val = ''
      } else {
        val = val < 0 ? 0 : val
        val = val > 255 ? 255 : val
      }
      item.value = val
      // this.$emit('change')
    },
    turnPosFunc(item, index, event) {
      console.log("event", event)
      let e = event || window.event;
      /*  && this.$refs.input[index].selectionStart === 0 */
      // 向左
      if (e.keyCode === 37 ) { // 向左
        if (index === 0) return
        this.$refs.input[index - 1].focus()
      }
      // 向右
      if (e.keyCode === 39  || item.value.toString().length === 3) { // 向右
        if (index === this.ipAddress.length - 1) return
        this.$refs.input[index + 1].focus()
      }
      // 删除
      if (e.keyCode === 8 && item.value.toString().length === 0) {
        if (index === 0) return
        this.$refs.input[index - 1].focus()
      }

    },
    inputBlurFunc() {
      // 失去焦点进行赋值操作
      let isEmpty = this.ipAddress.every(item => item.value === "")
      if (isEmpty) {
        this.$emit('change', "")
      } else {
        let value = this.ipAddress.map(item => item.value).join(".")
        this.$emit('change', value)
      }
    },
    // set ip
    setIpAddress(ipString) {
      if (!ipString) return
      let result = ipString && ipString.split(".")
      this.ipAddress.map((item, index) => result.filter((it, idx) => {
        if (index === idx) item.value = it
      }))
    }
  }
}
</script>

<style scoped>
.input__container {
  width: 100%;
  display: flex;
  border: 1px solid #F56C6C;
  border-radius: 4px;
}
.input__container__item {
  flex: 1;
  position: relative;

}
.input__container__item ::v-deep.el-input .el-input__inner {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}
.input__container__item:not(:nth-last-of-type(1)):after {
  display: block;
  content: "";
  clear: both;
  width: 2px;
  height: 2px;
  background-color: #252525;
  position: absolute;
  right: 0px;
  bottom: 10px;
}
</style>
